<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播终极版本+左右按键+span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 200px auto;
            border: 1px solid #000000;
            padding: 5px;
            width: 500px;
            height: 308px;
        }
        .inner{
            width: 500px;
            height: 308px;
            position: relative;
            overflow: hidden;
        }
        ul{
            /*float: left;*/
            list-style: none;
            width: 500%;/*很重要不做好长度，根本显示不出来最后一张图片，滑动轮播图要多一张的长度*/
            position: absolute;
            left: 0;
        }
        ul li {
            float: left;
        }

        #buttonRight{
            height: 80px;
            width: 40px;
            opacity: 0.5;
            font-size: 60px;
            position: absolute;
            right: 10px;
            top: 120px;
            background: aqua;
            cursor:pointer;
            display: none;
        }
        #buttonLeft{
            height: 80px;
            width: 40px;
            font-size: 60px;
            position: absolute;
            opacity: 0.5;
            left: 10px;
            top: 120px;
            background: aqua;
            cursor:pointer;
            display: none;
        }

        .spanArr{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .spanArr span{
            display: inline-block;
            height: 16px;
            width: 16px;
            font-size: 14px;
            text-align: center;
            color: black;
            background: aqua;
            cursor:pointer;
        }
        .spanArr .current{
            background: crimson;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner">
        <ul id="ul1">
            <li id="first"><img src="imgs/1.jpg" alt=""></li>
            <li><img src="imgs/2.jpg" alt=""></li>
            <li><img src="imgs/3.jpg" alt=""></li>
        </ul>
        <span id="buttonLeft"><</span>
        <span id="buttonRight">></span>
        <div class="spanArr">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
        </div>

    </div>
    <div id="newOl">
        <ol>

        </ol>
    </div>
</div>
<script>
    // 1.获取事件源以及相关
    // 2.绑定事件
    // 3.针对绑定事件添加驱动程序
    //    需求：1.span可以跟随图片轮播
    //         2.做到鼠标放上停止，鼠标移开开始
    var spanArr0=document.getElementsByClassName('spanArr')[0];
    var spanArr1=spanArr0.children;
    var ul1=document.getElementById('ul1');
    var ul1Arr=ul1.children;
    var newLi=ul1Arr[0].cloneNode(true);
    var inner=document.getElementsByClassName('inner')[0];
    ul1.appendChild(newLi);
    // var first=document.getElementById('first');
    // var newLi1=ul1Arr[0].cloneNode(true);
    // newLi1.insertBefore(first);
    var btnRight=document.getElementById('buttonRight');
    var btnLeft=document.getElementById('buttonLeft');
    var m=0;
    btnLeft.onclick=function () {
        m++;
        if(m>ul1Arr.length-1){
            m=ul1Arr.length-1;
            alert('到底啦！');
        }
        animation(ul1,-m*500);
    };
    btnRight.onclick=function () {
        m--;
        if(m<0){
            m=0;
            alert('到底啦！');
        }
        animation(ul1,-m*500);
    };
    var j=0;
    var k=0;
    var timer=setInterval(autoPlay,1500);
    function autoPlay() {
        k++;
        if (k>2){
            k=0;
        }
        for (var i=0;i<spanArr1.length;i++){
            spanArr1[i].className='';
        }
        spanArr1[k].className='current';

        j++;
        if (j>3){
            j=1;
            ul1.style.left=0+'px';
        }
        animation(ul1,-500*j);

    }
    //鼠标移上去跟鼠标拿开定时器打开与关闭 鼠标放上去停止 鼠标移开打开
    inner.onmouseover=function () {
        clearInterval(timer);
        btnLeft.style.display='block';
        btnRight.style.display='block';
    };
    inner.onmouseout=function () {
        timer=setInterval(autoPlay,1200);
        btnLeft.style.display='none';
        btnRight.style.display='none';
    };

    //左右按键点击可以进行切换图片
    btnLeft.onclick=function () {
        autoPlay(); // 这个点击类似于计时器setinterval（，1000）
    };
    btnRight.onclick=function () {
        k--;
        if (k<0){
            k=2;
        }
        for (var i=0;i<spanArr1.length;i++){
            spanArr1[i].className='';
        }
        spanArr1[k].className='current';

        j--;
        if (j<0){
            j=2;
            ul1.style.left=-1500+'px';
        }
        animation(ul1,-500*j);
    };

    //需要被调用的函数
    function animation(ele,target) {
        // var i=0;
        console.log('我就是来实验的');
        clearInterval(ele.timer);
        var speed=target>ele.offsetLeft?10:-10;

        ele.timer=setInterval(function () {
            ele.style.left=ele.offsetLeft+speed+'px';
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(speed)){
                ele.style.left=target+'px';
                clearInterval(ele.timer);
            }
        },2)

    }
</script>
</body>
</html>